<template>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
  </div>
</template>

<script setup></script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

.item {
  border: 1px solid #f00;
}

.item2 {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
      "item1 item2 item2"
      "item3 item2 item2"
      "item4 item5 item5"
      "item6 item7 item8";
  }

  .item1 {
    grid-area: item1;
  }

  .item2 {
    grid-area: item2;
  }

  .item3 {
    grid-area: item3;
  }

  .item4 {
    grid-area: item4;
  }

  .item5 {
    grid-area: item5;
  }

  .item6 {
    grid-area: item6;
  }

  .item7 {
    grid-area: item7;
  }

  .item8 {
    grid-area: item8;
  }
}
</style>
